<template>
  <div class="page">
    <my-header>
      <template #left>
        <van-icon name="search" />
      </template>
      <template #center>
        <span @click="$router.push('/')">{{ message.name || '请选择商圈' }}</span>
      </template>
      <template #right> 登录|注册 </template>
    </my-header>
    <my-msite :list="shopList"></my-msite>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import myHeader from "../../components/myHeader.vue";
import api from "../../api/index";
import MyMsite from "../../components/myMsite.vue";
export default {
  components: { myHeader, MyMsite },
  setup() {
    const { query } = useRoute();
    let geohash = query.geohash;

    const data = reactive({
      message: {}, // 商圈的信息
      shopList: [], // 商圈的商家
    });
    if (geohash) {
      api.get(`/v2/pois/${geohash}`).then((res) => {
        data.message = res;
      });
      // console.log(geohash.split(','));
      api
        .get(
          `/shopping/restaurants?latitude=${geohash.split(",")[0]}&longitude=${
            geohash.split(",")[1]
          }`
        )
        .then((res) => {
          data.shopList = res;
        });
    }
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.page {
}
</style>